<!doctype html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  <script type="text/javascript" src="/rest/views/js/jquery.js"></script> 
<title>实时监控数据生成</title>  
<!-- <link rel="stylesheet" type="text/css" href="/rucdbcourse/views/css//layui.css" media="all">-->
<style type="text/css">
  #data {
    display: none;
  }
</style> 
 
</head>  
<body>  
  
  <div >
   <div id="container" style="min-width:400px;height:400px"></div>
  </div>

</body> 
<script src="/rest/views/js/highcharts.js"></script>
<script type="text/javascript">

var chart = null; // 定义全局变量
$(document).ready(function() {
  chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      type: 'spline',
      events: {
        load: requestData // 图表加载完毕后执行的回调函数
      }
    },
    title: {
      text: 'Live random data'
    },
    xAxis: {
      type: 'datetime',
      tickPixelInterval: 150,
      maxZoom: 20 * 1000
    },
    yAxis: {
      minPadding: 0.2,
      maxPadding: 0.2,
      title: {
        text: 'Value',
        margin: 80
      }
    },
    series: [{
      name: '随机数据',
      data: []
    }]
  });
});
 

/**
 * Ajax 请求数据接口，并通过 Highcharts 提供的函数进行动态更新
 * 接口调用完毕后间隔 1 s 继续调用本函数，以达到实时请求数据，实时更新的效果
 */
function requestData() {
  $.ajax({
    url: 'highEchart/getXY',
    success: function(point) {
    	console.log(point.value)
    	var points = JSON.parse(point.value)
    	var x = (new Date()).getTime(), // 当前时间
		y = points[0];          // 随机值
      var series = chart.series[0],
        shift = series.data.length > 20; // 当数据点数量超过 20 个，则指定删除第一个点

      // 新增点操作
      //具体的参数详见：https://api.hcharts.cn/highcharts#Series.addPoint
      chart.series[0].addPoint([x,y], true, shift);
        

      // 一秒后继续调用本函数
      setTimeout(requestData, 1000);
    },
    cache: false
  });
} 

//自动生成 start
/* Highcharts.setOptions({
	global: {
			useUTC: false
	}
});
function activeLastPointToolip(chart) {
	var points = chart.series[0].points;
	chart.tooltip.refresh(points[points.length -1]);
}
var chart = Highcharts.chart('container', {
	chart: {
			type: 'spline',
			marginRight: 10,
			events: {
					load: function () {
							var series = this.series[0],
									chart = this;
							activeLastPointToolip(chart);
							setInterval(function () {
									var x = (new Date()).getTime(), // 当前时间
											y = Math.random();          // 随机值
									series.addPoint([x, y], true, true);
									activeLastPointToolip(chart);
							}, 1000);
					}
			}
	},
	title: {
			text: '动态模拟实时数据'
	},
	xAxis: {
			type: 'datetime',
			tickPixelInterval: 150
	},
	yAxis: {
			title: {
					text: null
			}
	},
	tooltip: {
			formatter: function () {
					return '<b>' + this.series.name + '</b><br/>' +
							Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
							Highcharts.numberFormat(this.y, 2);
			}
	},
	legend: {
			enabled: false
	},
	series: [{
			name: '随机数据',
			data: (function () {
					// 生成随机值
					var data = [],
							time = (new Date()).getTime(),
							i;
					for (i = -19; i <= 0; i += 1) {
							data.push({
									x: time + i * 1000,
									y: Math.random()
							});
					}
					return data;
			}())
	}]
}); */
//自动生成 end
</script>
  
</body>  
</html>  
